<template>
	<el-main class="nopadding" style="overflow: hidden; margin: 0px;background-color: transparent;">
		<el-row :gutter="15" v-if="data != null">
			<el-col :lg="6">
				<el-card shadow="never" style="margin: 0px; padding: 0px;">
					<jd-statistic title="总使用次数" :value="data.total" suffix="次" :description="data.totalDeadline" groupSeparator></jd-statistic>
				</el-card>
			</el-col>
			<el-col :lg="6">
				<el-card shadow="never" style="margin: 0px; padding: 0px;">
					<jd-statistic title="应用记录数" :value="data.flowData.appRecord" suffix="条" groupSeparator>
						本月新增<span style="margin:0px 5px">{{data.flowData.monthRecord}}</span>条
					</jd-statistic>
				</el-card>
			</el-col>
			<el-col :lg="6">
				<el-card shadow="never" style="margin: 0px; padding: 0px;">
					<jd-statistic title="当月记录数" :value="data.flowData.monthTotal" suffix="条" groupSeparator>
						本日新增<span style="margin:0px 5px">{{data.flowData.dayRecord}}</span>条
					</jd-statistic>
				</el-card>
			</el-col>
			<el-col :lg="6">
				<el-card shadow="never" style="margin: 0px; padding: 0px;">
					<jd-statistic title="已审批完成" :value="data.flowData.completedTotal" suffix="条" groupSeparator>
						待审批<span style="margin:0px 5px">{{data.flowData.pendingTotal}}</span>条
					</jd-statistic>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import jdStatistic from '@/components/jdStatistic';
	export default {
		title: "数据统计",
		icon: "el-icon-setting",
		description: "点个星星支持一下",
		components: {
			jdStatistic
		},
		props:{
			data:Object
		},
		data() {
			return {
				trendValue1: 7.7,
				trendValue2: -18.9
			}
		}
	}
</script>

<style scoped>
	.item-background p {color: #999;margin-top:10px;line-height: 1.8;}
	.el-card {margin-bottom: 15px;}
	.up {color: #F56C6C;margin-left: 5px;}
	.down {color: #67C23A;margin-left: 5px;}
</style>
